<template>
  <el-tooltip :disabled="tooltipDisabled" :content="realTime">
    <span v-if="dateTime">
      <span v-if="preDisplay">{{ preText }} </span>
      <span>{{ timeDisplay }}</span>
      <span> {{ postText }}</span>
    </span>
  </el-tooltip>
</template>

<script>
import { format } from 'timeago.js';

export default {
  name: 'Timeago-v2',
  props: {
    dateTime: {
      required: true,
    },
    preText: [String, Number],
    postText: [String, Number],
    timeago: { // 启用timeago的时机 'always', 'none', 'auto'
      type: String,
      default: 'auto', // 一天内的启用timeago
    },
    formatAs: String, // date-time-sec-week 选取分开
    autoPre: Boolean, // 是否启用大于一年时不显示前置内容
  },
  computed: {
    // 什么时候启用 timeago
    timeagoEnable() {
      if (this.timeago === 'always') return true;
      else if (this.timeago === 'none') return false;

      const thisTimestamp = new Date().getTime();
      const thatTimestamp = new Date(this.dateTime).getTime();
      return thisTimestamp - thatTimestamp < 24 * 60 * 60 * 1000;
    },
    // 什么时候关闭tooltip
    tooltipDisabled() { return !this.timeagoEnable || this.timeago === 'auto'; },
    // 显示的时间
    timeDisplay() {
      if (this.timeagoEnable) return format(this.dateTime, 'zh_CN');
      return this.realTime;
    },
    thisYear() {
      const thisYear = new Date().getFullYear();
      const thatYear = new Date(this.dateTime).getFullYear();
      return thisYear === thatYear;
    },
    preDisplay() {
      if (this.autoPre) return this.thisYear;
      return true;
    },
    // 真实的时间
    realTime() {
      const thatDay = new Date(this.dateTime);
      const year = thatDay.getFullYear(); // 年
      const month = this.addZero(thatDay.getMonth() + 1); // 月
      const date = this.addZero(thatDay.getDate()); // 日
      const hours = this.addZero(thatDay.getHours()); // 小时
      const minutes = this.addZero(thatDay.getMinutes()); // 分钟
      const seconds = this.addZero(thatDay.getSeconds()); // 秒钟
      const day = thatDay.getDay(); // 每个星期的第几天，`0`代表星期天

      const formatAs = (this.formatAs ? this.formatAs : 'date-time').split('-');
      const showSec = formatAs.includes('sec');
      const showWeek = formatAs.includes('week');

      const yymmdd = (() => {
        if (this.thisYear && !this.formatAs) return `${month}-${date}`;
        else if (showWeek) return `${year}年${month}月${date}日`;
        return `${year}-${month}-${date}`;
      })();
      const hhmmss = (() => {
        if (showSec) return `${hours}:${minutes}:${seconds}`;
        return `${hours}:${minutes}`;
      })();

      if (this.timeago === 'auto' && !this.formatAs) return yymmdd;

      return formatAs.map((item) => {
        switch (item) {
          case 'date': return yymmdd;
          case 'time': return showSec ? undefined : hhmmss;
          case 'sec': return hhmmss;
          case 'week': return this.weekCN(day);
          default: return 'error';
        }
      }).filter(Boolean).join(' ');
    },
  },
  methods: {
    addZero(num) { return num < 10 ? `0${num}` : num; },
    weekCN(weekday) { return { 0: '星期天', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六' }[weekday]; },
  },
};
</script>

<style></style>
